<template>
    <div id="swiper_ProductList"  v-loading="loading">
        <div class="nav-title">
            <ul class="swiper-wrapper nav-item">
                <li v-bind:class="{ on:i==current}" class="swiper-slide nav-list" :data-index="i" v-for="(item,i) in tab_title" :key="i" @click="_ckli(i,$event)" >{{item.title}}</li>
            </ul>
        </div>
        <div class="product-row">
            <div class="product" v-for="(item,i) in autumn_products" :key="i" v-if='i < 10'>
                <router-link :to="{name:'Vproduct',query:{id:item.sku,title:item.title,img:item.image,price:item.price,originPrice:item.originPrice,totalReviews:item.totalReviews}}"></router-link>
                <img :src="item.image" alt="">
                <div class="" >
                    <h2 class="">{{item.title}}</h2>
                    <p class="price"><span>{{item.originPrice}}</span><span>{{item.price}}</span></p>
                </div>
            </div>
        </div> 
    </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Ajax from './../../ajax/ajax.js';
export default {
    name:'',    
    components: {
    },
    data(){
        return {
            autumn_products:[{
                "image":"",
                "price":"",
                "originPrice":"",
                "title":""
            }],
            banner:'',
            tab_title:[{"title":""}],
            tab:2,
            current:0,
            loading:true,
        }
    },
    created(){
        this.loadData();        
    },
    methods: {
        async loadData(){
            await Ajax(`market/meeting?primaryKey=`+ this.tab +`&code=autumn_sale`)
            .then(({code,message,data})=>{
                this.loading=false;
                console.log(data);                           
                this.tab_title = data.meetings;
                this.autumn_products = data.meetings[this.tab].products;                                
                this.banner = data.meetings[this.tab].banner;

            })
            .catch(error =>{
                if(error){
                    console.log("错误：",{error});
                }
            })
        },
        _ckli(key,event){
            this.loading=true;
            this.tab = key;
            this.current=key;              
            var el = event.currentTarget;                     
            Ajax(`market/meeting?primaryKey=`+ this.tab +`&code=autumn_sale`)
            .then(({code,message,data})=>{
                this.loading=false;
                console.log(data);
                this.tab_title = data.meetings;
                this.autumn_products = data.meetings[this.tab].products;                                
                this.banner = data.meetings[this.tab].banner;                 
            })
            .catch(error =>{
                if(error){
                    console.log("错误：",{error});
                }
            })
        }
    },
    updated(){
        let productListSwiper = new Swiper('.nav-title', {
            slidesPerView : 2.8,
            spaceBetween : 10,
        })
    } 
}
</script>
<style>
#swiper_ProductList{min-height:200px;}
.nav-title{
    width:calc(100% - 10px);
    overflow: hidden;
    margin-top: 50px;           
    padding: 0 5px;
}
.nav-item{
    padding:0;
    align-items: center;
}
.nav-list{
    font-weight: 900;
    font-size: 16px;
    line-height: 1.1;
    height: 34px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom:2px solid transparent;
}
.nav-list.on{
border-color:#000;
}
.product-row{
    flex-flow: wrap;
    display: flex;
}
.product-row .product{
    width: calc(50% - 4px);
    padding: 0 2px;
    position: relative;
}
.product-row .product a{
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    right: 0;
}
.product-row .product img {
    width: 100%
}
.product-row .product h2{
    font-size: 14px;
    height:32px;
    overflow: hidden;
}
</style>
